<template>
  <div class="fullPage">
    <div class="head">
      <a-page-header
        :style="{ background: '#eee' }"
        :title="form.title"
        :subtitle="form.author"
        @back="goToBack"
      />
      <div class="head-buttom">
        <a>{{ form.pulished_at }}</a>
        <a>
          <a-space>
            <a-button type="text" @click="goToEdit">编辑</a-button>
          </a-space>
        </a>
      </div>
    </div>
    <div class="content">
      <a-empty v-if="form.content == ''" description="暂无内容" />
      <md-editor
        v-else
        v-model="form.content"
        preview-only
        style="text-align: left; width: 100%; background-color: #eee"
      />
    </div>
  </div>
</template>

<script setup>
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { useRouter } from "vue-router";
import { DETAILBLOG } from "@/api/post";
import { reactive, onMounted } from "vue";
import mtz from "moment-timezone";
const router = useRouter();
const form = reactive({
  id: 0,
  title: "",
  content: "",
  summary: "",
  author: "",
  pulished_at: "未发布",
  isRead: false,
});
onMounted(async () => {
  if (
    router.currentRoute.value.params.id &&
    router.currentRoute.value.params.id != 0
  ) {
    try {
      await DETAILBLOG(router.currentRoute.value.params.id).then(
        (value) => {
          // console.log(value.Msg);
          if (value.Msg.pulished_at != 0) {
            form.pulished_at = mtz(value.Msg.pulished_at * 1000)
              .tz("Asia/Shanghai")
              .format("YYYY-MM-DD HH:mm:ss");
          }
          form.title = value.Msg.title;
          form.content = value.Msg.content;
          form.summary = value.Msg.summary;
          form.author = value.Msg.author;
          form.id = value.Msg.id;
          if (value.Msg.status == "published") {
            form.isRead = true;
          } else {
            form.isRead = false;
          }
        },
        (reason) => {
          console.log(reason);
          router.back();
        }
      );
    } catch (error) {
      console.log(error);
    }
  }
});
//返回部分的触发事件
const goToBack = () => {
  router.back();
};

//编辑按钮的触发事件
const goToEdit = () => {
  router.push(`/backstage/admin/update/${form.id}`);
};
</script>

<style lang="css" scoped>
.content {
  background-color: #eee;
  display: flex;
  width: 100%;
  margin: 1em auto 0;
  height: 100%;
  border: 2px solid #6fa833;
  padding: 10px;
  border-radius: 5px 5px 5px 5px !important;
  box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgb(10 10 0 / 50%);
}
.fullPage {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.head-buttom {
  display: flex;
  margin: 0 5px;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #908c8c;
}
</style>
